import React from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { SubmitBar } from "react-vant";
import { Button, Card, List, Tag } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import { UnorderedListOutline, RightOutline } from "antd-mobile-icons";
import { removeSelectedPerson } from "../../reducers/personSlice";

function OrderList() {
    const { state } = useLocation();
    const [search] = useSearchParams();
    const price = search.get("price");
    const personSlice = useSelector((state) => state.personSlice);
    const dis = useDispatch()

    const nav = useNavigate();

    console.log(state);
    console.log(price);

    const entryOrder = () => {
        console.log("object");
        nav("/order_confirmation");
    };

    return (
        <div>
            <Card title="乘车人" extra={<Button onClick={() => {
              nav('/person')
            }}>添加乘车人<RightOutline /></Button>}>
                <List>
                    {personSlice.map((item) => {
                        if (item.status) {
                            return (
                                <List.Item key={item.id} prefix={<UnorderedListOutline onClick={()=>{
                                  dis(removeSelectedPerson(item.id))
                                }} />}>

                                    {item.name}
                                    <Tag
                                        color={
                                            item.type === "成人"
                                                ? "primary"
                                                : item.type === "老年人"
                                                ? "warning"
                                                : "default"
                                        }
                                    >
                                        {item.type}
                                    </Tag>
                                </List.Item>
                            );
                        }
                        return null;
                    })}
                </List>
            </Card>
            <Button
                onClick={() => {
                    entryOrder();
                }}
            >
                提交订单
            </Button>
            <SubmitBar
                price=""
                buttonText="提交订单"
                onSubmit={() => {
                    entryOrder();
                }}
            />
        </div>
    );
}

export default OrderList;
